//useRoutes 用于根据路由表,动态创建Routes和Route
import{Navigate,useRoutes} from 'react-router-dom'
import Login from '../pages/Login'
import Main from '../pages/Main'
import NotFound from '../components/NotFound'
import Home from '../pages/Main/Home'
import About from '../pages/Main/About'
import List from '../components/List'
//24.提取公共组件到components文件夹（例如404，还有只有数据不一样的子组件），路由组件放在page组件中
const routes =[
    {
        path:'/login',
        element:<Login/>
    },
    {
        path:'/main',
        element:<Main/>,
        children:[
            {
                path:'/main/home',
                element:<Home/>,
                children:[
                    {
                        path:'/main/home/music/:id',
                        element:<List/>  
                    },
                    {
                        path:'/main/home/news/:id',
                        element:<List/>  
                    }
                ]
            },
            {
                path:'/main/about',
                element:<About/>
            }
        ]
    },{
        path:'/',
        element:<Navigate to='/login' />
    },{
        path:'*',
        element:<NotFound/>
    },
]
export default routes

//useRoutes hooks使用标准：只能在函数式组建的最外层使用或者在自定义hooks中使用
//所以在这里用useRoutes需要在外包一层函数式组件或自定义hooks
// 当变量名为大写，就会识别为函数式组件，这样就可以在这里面使用useRoutes了 而且在APP中就直接使用这个MyRoutes组件就会生成路由结构了（因为识别到函数式组件时，会自动调用这个函数）
export const MyRoutes=()=>{

    return useRoutes(routes)
 }
 //在自定义hooks中可以使用hooks（前面有use就会被识别为自定义hooks）
 export const useMyRoute =()=>{
     return useRoutes(routes)
 }